import '../styles/index.css';
import React, { useState, useEffect } from 'react';
import axios from '@/axios';
import DynamicBreadcrumb from '@/pages/breadCrumb';
import { history, useLocation } from 'umi';

import {
  LaptopOutlined,
  NotificationOutlined,
  UserOutlined,
  BarsOutlined,
  AppstoreOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu } from 'antd';
const { Header, Content, Footer, Sider } = Layout;

const Index: React.FC = (props) => {
  const location = useLocation();
  const roleId = localStorage.getItem('userInfo');
  const [id, setId] = useState(roleId || '');
  const [username] = useState(localStorage.getItem('username') || '');
  useEffect(() => {
    getMenuData();

    localStorage.setItem('id', JSON.stringify(location));
  }, []);
  const [openKeys, setOpenKeys] = useState([]);
  const [menuData, setMenuData] = useState([]);
  const getOpenKeys = (pathname: string) => {
    const paths = pathname.split('/').filter(Boolean);

    return [`/${paths[0]}/${paths[1]}`];
  };

  const getMenuData = async () => {
    const {
      data: { data, code },
    } = await axios.get('getMenu', { params: { id: id } });
    if (code === 200) {
      setMenuData(data);
    }
  };

  const items3: MenuProps['items'] = menuData.map(
    (item: any, index: number) => {
      if (!item.children) {
        return {
          key: `${item.key}`,
          icon: React.createElement(NotificationOutlined),
          label: `${item.label}`,
        };
      } else {
        return {
          key: `${item.key}`,
          icon: React.createElement(BarsOutlined),
          label: `${item.label}`,
          children: item.children.map((child: any, index: number) => {
            return {
              key: `${child.key}`,
              label: `${child.label}`,
              icon: React.createElement(UserOutlined),
            };
          }),
        };
      }
    },
  );

  const handleOpenChange: MenuProps['onOpenChange'] = (keys: any) => {
    setOpenKeys(keys.slice(-1));
  };
  useEffect(() => {
    const keys: any = getOpenKeys(location.pathname);
    setOpenKeys(keys);
  }, [location.pathname]);

  const onClick: MenuProps['onClick'] = (e) => {
    history.push(`${e.key}`, { someParam: e.key });
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Header className="header">
        <div>
          <img
            src={require('../public/日程.png')}
            alt=""
            style={{
              width: '45px',
              height: '45px',
              position: 'relative',
              top: '-6px',
            }}
          />
          <span
            style={{ fontSize: '23px', fontWeight: '700', marginLeft: '15px' }}
          >
            排班管理系统
          </span>
        </div>
        <div style={{ position: 'absolute', right: '60px', top: '0px' }}>
          <span>Welcome ! {username}</span>
          <img
            src={require('@/public/头像.png')}
            alt=""
            style={{ width: '33px', height: '33px', marginLeft: '15px' }}
          />
          <a href="/login" style={{ marginLeft: '10px' }}>
            Login out
          </a>
        </div>
      </Header>
      <Content style={{ padding: '0 30px' }}>
        <DynamicBreadcrumb />
        <Layout className="site-layout-background" style={{ padding: '' }}>
          <Sider
            className="site-layout-background"
            width={200}
            style={{ height: '100%' }}
          >
            <Menu
              mode="inline"
              defaultSelectedKeys={['/home/index']}
              defaultOpenKeys={['首页']}
              style={{ minHeight: '80vh' }}
              items={items3}
              onClick={onClick}
              onOpenChange={handleOpenChange}
              openKeys={openKeys}
              selectedKeys={[location.pathname]}
            />
          </Sider>
          <Content style={{ padding: '0 24px', minHeight: 280 }}>
            {props.children}
          </Content>
        </Layout>
      </Content>
      {/* <Footer style={{ textAlign: 'center' }}>crew-scheduling ©2024</Footer> */}
    </Layout>
  );
};

export default Index;
